import plugin from 'tailwindcss/plugin'

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'selector',
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        questionboxbg: '#E8E9FF',
        aif10enterbg: 'rgba(115,116,255,0.16)',

        // 一级文本色 /标题 正文
        'text-01': '#313438',
        // 二级文本色 / 正文 辅文
        'text-02': '#60656C',
        // 三级文本色 / 辅文
        'text-03': '#92989F',
        // 主题本色 / 正文 辅文
        'text-04': '#636FFF',
        // 异常文本色
        'text-05': '#FF8080',

        // 黑版一级文本色 /标题 正文
        'text-01-dark': '#FAFBFC',
        // 黑版二级文本色 / 正文 辅文
        'text-02-dark': '#C8CBD0',
        // 黑版三级文本色 / 辅文
        'text-03-dark': '#AEB2B7',
        // 黑版主题本色 / 正文 辅文
        'text-04-dark': '#7E8DFF',
        // 黑版异常文本色
        'text-05-dark': '#FFAAAA',

        // 一级边框 / 分割线 / 边框悬停态 分割线
        'border-01': '#C8CBD0',
        // 二级边框 / 分割线 / 边框 分割线
        'border-02': '#DADDE0',
        // 三级边框 / 分割线 / 边框 分割线
        'border-03': '#EDEEF0',
        // 主题边框 / 分割线 / 边框 分割线
        'border-04': '#636FFF',
        // 异常边框色
        'border-05': '#FF8080',
        // 主题边框 / 分割线 / 边框 分割线
        'border-06': 'rgba(99, 111, 255, 0.4)',

        // 黑版一级边框 / 分割线 / 边框悬停态 分割线
        'border-01-dark': '#60656C',
        // 黑版二级边框 / 分割线 / 边框 分割线
        'border-02-dark': '#60656C',
        // 黑版三级边框 / 分割线 / 边框 分割线
        'border-03-dark': '#313438',
        // 黑版主题边框 / 分割线 / 边框 分割线
        'border-04-dark': '#7E8DFF',
        // 黑版异常边框色
        'border-05-dark': '#FFAAAA',
        // 黑版主题边框 / 分割线 / 边框 分割线
        'border-06-dark': 'rgba(126, 141, 255, 0.4)',

        // 一级背景色 / 页面 卡片背景
        // 'background-01': '#FFFFFF',
        'background-01': 'rgba(255,255,255,0.80)',
        // 二级背景色 / 小区块背景
        'background-02': '#F7F8FA',
        // 三级背景色 / 小区块背景
        'background-03': '#F3F4F6',
        // 四级背景色 / 小区块背景
        'background-04': '#EDEEF0',
        // 主题背景色 / 特殊区块背景
        'background-05': '#636FFF',
        // 页面背景色
        'background-06': '#EBEEF5',
        // 目录收缩栏hover背景色
        'background-07': '#EFF0FF',
        // 命令行背景
        'background-08': '#F7F8FA',
        // 消息异常背景色
        'background-09': '#FFECEC',
        // 导航Tab小工具tip背景色
        'background-10': '#DADDE0',
        // 激活态导航Tab小工具tip背景色
        'background-11': '#9696FF',
        // 导航Tab小工具 hover态背景色
        'background-12': 'rgba(115,116,255,0.16)',
        // rag hover背景
        'background-13': '#E8E9FF',

        // 黑版一级背景色 / 页面 卡片背景
        // 'background-01-dark': '#181E25',
        'background-01-dark': 'rgba(24,30,37,0.80)',
        // 黑版二级背景色 / 小区块背景
        'background-02-dark': '#313438',
        // 黑版三级背景色 / 小区块背景
        'background-03-dark': '#484C51',
        // 黑版四级背景色 / 小区块背景
        'background-04-dark': '#60656C',
        // 黑版主题背景色 / 特殊区块背景
        'background-05-dark': '#7E8DFF',
        // 黑版页面背景色
        'background-06-dark': '#2E343A',
        // 目录收缩栏hover背景色
        'background-07-dark': '#363E7C',
        // 黑版消息异常背景色
        'background-09-dark': '#5D374D',
        // 黑版导航Tab小工具tip背景色
        'background-10-dark': '#92989F',
        // 黑版激活态导航Tab小工具tip背景色
        'background-11-dark': '#6E6EBE',
        // 黑版导航Tab小工具 hover态背景色
        'background-12-dark': 'rgba(99,111,255,0.40)',
        // rag hover背景
        'background-13-dark': '#2C3450'
      },
      backgroundImage: {
        page: "url('/images/page.png')",
        'page-dark': "url('/images/page-dark.png')",
        head: "url('/images/head.png')",
        'head-dark': "url('/images/head-dark.png')",
        drawerbg: 'linear-gradient(134deg, #EFE7FE 0%, #FBF0F7 17%, #EBF3FD 57%, #EAF3FD 100%)',
        drawerbgdark: 'linear-gradient(to right, rgba(49,52,56,0.40), rgba(49,52,56,0.40))',
        chatcardtool:
          'linear-gradient(to right, #D263FF 24%, #3F72FF 50%, #457CFF 91%, #83EEFF 100%)',
        tg: 'linear-gradient(305deg, #3F72FF 0%, #8F63FF 90%)',
        'title-bar': 'linear-gradient(-45deg, #3F72FF 0%, #8F63FF 100%)',
        'title-bar-dark': 'linear-gradient(-45deg, #3F72FF 0%, #8F63FF 100%)',
        'chat-panel':
          'linear-gradient(0deg, #FFFFFF 0%, rgba(255,255,255,0.16) 40%, rgba(255,255,255,0.72) 100%)',
        'chat-panel-dark':
          'linear-gradient(0deg, #000 0%, rgba(0,0,0,0.16) 40%, rgba(0,0,0,0.72) 100%)'
      },
      boxShadow: {
        selectSection: '0px 2px 8px 0px rgba(0,0,0,0.12)',
        enterHover: '1px 2px 8px 0px rgba(0,0,0,0.12)'
      }
    }
  },
  plugins: [
    plugin(function ({ addComponents, addVariant }) {
      addComponents({
        '.border-base': {
          position: 'relative'
        },
        '.border-base-card': {
          position: 'relative'
        },
        '.border-gradient': {
          border: '1px solid transparent !important',
          'border-radius': '6px',
          'background-clip': 'padding-box, border-box',
          'background-origin': 'padding-box, border-box',
          'background-image':
            'linear-gradient(to right, #fff, #fff), linear-gradient(20deg, #7638FF, #E788BD, #30A3FE);'
        },
        '.dark .border-gradient': {
          'background-image':
            'linear-gradient(to right, #000, #000), linear-gradient(20deg, #7638FF, #E788BD, #30A3FE);'
        }
      }),
        addVariant('black', '.dark &')
    })
  ]
}
